<template>
  <div id="container">
    <el-row>
      <el-col>
        <el-table
          size="small"
          :data="openFundIndexsPager"
          border
          :header-cell-style="tableHeaderColor"
          :cell-style="cellContentStyle"
          :row-class-name="rowClassName"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="dm"
            label="基金代码"
            width="110">
          </el-table-column>
          <el-table-column
            prop="mc"
            label="基金名称"
            width="240">
          </el-table-column>
          <el-table-column
            prop="dwjz"
            label="单位净值"
            width="80">
          </el-table-column>
          <el-table-column
            prop="ljjz"
            label="累计净值"
            width="80">
          </el-table-column>
          <el-table-column
            prop="qyrjz"
            label="前一日净值"
            width="100">
          </el-table-column>
          <el-table-column
            prop="zde"
            label="涨跌额"
            width="80">
          </el-table-column>
          <el-table-column
            prop="zzl"
            label="增长率"
            width="60">
            <template slot-scope="scope">
              <div v-if="scope.row.zzl < 0" style="color:green">
                {{ scope.row.zzl + '%' }}
              </div>
              <div v-else style="color: red">
                {{ scope.row.zzl + '%' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="sgzt"
            label="申购状态"
            width="80">
          </el-table-column>
          <el-table-column
            prop="jzrq"
            label="净值日期"
            width="100">
          </el-table-column>
          <el-table-column
            prop="glr"
            label="基金管理人"
            width="150">
          </el-table-column>
          <el-table-column
            prop="jjlx"
            label="基金类型"
            width="120">
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="12" :offset="6" style="margin-top: 10px;text-align: center">
            <el-pagination
              :current-page.sync="currentPage"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :pager-count="15"
              layout="prev, pager, next"
              :total="openFundIndexsInfo.length">
            </el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index.vue",
  data() {
    return {
      pageSize: 12,   //每页的记录数
      currentPage: 1, //当前的页号，
      openFundIndexsInfo: []
    }
  },
  computed: {
    openFundIndexsPager: function () {
      return this.openFundIndexsInfo.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    },
  },

  mounted() {
    this.getOpenFundIndexInfo();
  },
  methods: {
    getOpenFundIndexInfo() {
      this.$store.dispatch('queryOpenFundIndexRealInfo').then(resp => {
        console.log(resp);
        this.openFundIndexsInfo = JSON.parse(resp.data);

      })
    },
    rowClassName({row, rowIndex}) {
      //把每一行的索引放进row.id
      row.id = rowIndex+1;
    },
    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      return 'text-align: center;color: #426ab3'
    },
    cellContentStyle({row, column, rowIndex, columnIndex}) {
      return "text-align: center;"
    },
    handleSizeChange: function (size) {
      this.pageSize = size;
      //console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      //console.log(this.currentPage)  //点击第几页
    }
  }
}
</script>

<style scoped>
#container {
  margin: 20px 20px;
  padding-right: 20px;
}

.demo-form-inline {
  text-align: center;
}
</style>
